<template>
	<view class="invite-page relative font-hanserif-bold">
		<view class="" style="display: none">
			<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
				:src="`${commonConfigs.domainFrontFileLink}/files/images/common/invite_bg.png`" mode=""></image>
		</view>

		<comDetailNavigateBack title="邀请好友" />
		
		<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
			:src="`${commonConfigs.domainFrontFileLink}/files/images/invite/invite-page-bg.png`" 
			class="bg" 
			style="top: 0; height: 3116rpx;width: 750rpx;" />

		<comPosterCanvas ref="posterCanvas" @cancel="posterCancelFun" :posterData.sync="posterData" @previewImage="previewImage" @touchmove.prevent />
		
		<scroll-view class="info-detail relative font-hanserif-bold" :scroll-y="scrollY" :scroll-top="scrollTop" @scroll="setScrollFun" :style="{ height: 'calc(100vh - ' + commonNavHeight + ')', overflow: 'auto' }">
			
			<image class="info-banner relative" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/invite-banner.png`" mode=""></image>
			
			<view class="info-name relative margin-auto flex-all-center">
				<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/invite-title.png`" mode=""></image>
				<text class="relative">{{ inviteTips || '豪礼无限送，邀请越多福利越多！！！' }}</text>
			</view>
			
			<view class="info-qrcode relative margin-auto flex-all-center" @click="setGeneratePosterFun">
				<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
					:src="`${commonConfigs.domainFrontFileLink}/files/images/invite/invite-create-mp.png`" mode=""></image>
				<!-- <text class="relative font-hanserif-bold">点击生成小程序二维码</text> -->
			</view>
			
			<view class="info-qrcode relative margin-auto flex-all-center" @click="setShowUppopFun" v-if="isShowAppPoster">
				<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
					:src="`${commonConfigs.domainFrontFileLink}/files/images/invite/invite-create-app.png`" mode=""></image>
				<!-- <text class="relative font-hanserif-bold">点击生成APP邀请码</text> -->
			</view>

			<view class="info-award relative margin-auto">
				<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/invite-reward.png`" mode=""></image>
				<view class="award-title absolute">
					<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/reward-title-bg.png`" mode=""></image>
				</view>
				<view class="award-content relative">
					<view class="award-item absolute" v-for="(item, index) in awardData" :key="index">
						<!-- <image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/ball.png`" mode=""></image> -->
						<image class="award-cover absolute" :src="item.item_cover" mode="aspectFit"></image>
						<view class="award-name absolute flex-all-center">
							<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/ball-text.png`" mode="aspectFill"></image>
							<text class="relative award-name-txt truncate">{{ item.item_name }}</text>
						</view>
					</view>
				</view>
				<view class="award-desc absolute flex-all-center">
					<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/invite-tips.png`" mode=""></image>
					<view class="relative">解锁升级即可获得奖励<br/>奖励不会重复获得</view>
				</view>
			</view>

			<image class="award-process relative margin-auto" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/invite-step.png`" mode=""></image>

			<view class="tabbar-box flex flex-justify-content-center relative">
				<view class="tabbar-item relative flex-all-center" :class="currentActiveTab === index ? 'active' : ''" v-for="(item, index) in tabAreaList" :key="index" @click="setTabFun(index)">
					<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						:src="currentActiveTab === index
							? `${commonConfigs.domainFrontFileLink}/files/images/invite/invite-tab-active.png`
							: `${commonConfigs.domainFrontFileLink}/files/images/invite/invite-tab.png`
						"mode=""></image>
						
					<text class="relative font-hanserif-bold">{{ item.name }}</text>
				</view>
			</view>

			<scroll-view scroll-y @scrolltolower="scrolltolower" :style="{height: scrollHeightBox,position: 'relative'}">
				<view class="detail-data relative">
					<template v-if="resLists && resLists.length">
						<!-- 下级用户 -->
						<template v-if="currentActiveTab === 0">
							<view class="lower-box margin-auto relative" v-for="(item, index) in resLists" :key="index">
								<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/level-bg.png`" mode=""></image>

								<view class="lower-box-top relative flex flex-align-items-center">
									<view class="lower-avatar">
										<image class="lower-avatar-img" :src="item.avatar" mode=""></image>
									</view>
									<view class="lower-title">
										<view class="lower-title-nick">{{ item.nickname }}</view>
										<view class="lower-title-date">{{ item.create_time }}</view>
									</view>
									<view class="receive-box relative flex-justify-content-center" v-if="currentActiveTab === 0" :class="item.enable_receive === 1 ? '' : 'disabled'" @click="setReceiveAwardFun(item.id, index)">
										<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/receive-btn.png`" mode=""></image>
									</view>
								</view>
								<view class="lower-award-box relative flex flex-align-items-center">
									<view class="bar-list flex-start relative" v-if="item.invite_config && item.invite_config.length">
										<view class="process-upper absolute flex flex-justify-content-between">
											<view class="process-downer absolute" :style="{ width: (item.progressWidth || 0) + '%', overflow: 'hidden', 'max-width': '100%' }"> </view>
										</view>
										<view class="award-box flex-all-center relative flex-direction-column" v-for="(subItem, subIndex) in item.invite_config" :key="subIndex">
											<view class="award-info relative flex-all-center" :class="subItem.status === 2 ? 'is-use' : ''" @click="handleToast(subItem.item_name)">
												<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/ico-item.png`" mode=""></image>
												<image class="award-box-cover" :src="subItem.item_cover" mode="aspectFill"></image>
												<!-- <view class="award-num absolute font-hanserif-bold">x{{ subItem.num }}</view> -->
												<view class="award-name-box absolute">
													<text class="award-name-box-txt relative truncate">{{ subItem.item_name }}</text>
													<text class="award-name-box-txt relative truncate">x{{ subItem.num }}</text>
												</view>
												<image
													class="award-received-bg absolute"
													v-if="subItem.status === 2 && (commonConfigs && commonConfigs.domainFrontFileLink)"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/invite/ico-item-receive.png`"
													mode=""
												></image>
											</view>
											<view class="process-point relative flex-all-center" :class="subItem.status !== 0 ? 'active' : ''">
												<image
													class="bg"
													 v-if="commonConfigs && commonConfigs.domainFrontFileLink"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/invite/dot.png`"
													mode=""
												></image>
												<text class="relative">{{ subIndex + 1 }}</text>
											</view>
											<text class="process-point-txt">消费<text style="color: #FFFFFF;font-size: 20rpx;">{{ subItem.money }}</text>机能</text>
										</view>
									</view>
								</view>
							</view>
						</template>
						<!-- 领取记录 -->
						<template v-else-if="currentActiveTab === 1">
							<view class="record-box margin-auto relative flex flex-align-items-center flex-justify-content-between" v-for="(item, index) in resLists" :key="index">
								<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/record-bg.png`" mode=""></image>
								<view class="record-info relative flex flex-align-items-center">
									<image class="record-info-avatar" :src="item.avatar" mode="aspectFill" />
									<view class="record-info-name">
										<view class="record-info-txt truncate font-hanserif-bold">{{ item.nickname }}</view>
										<view class="record-info-date">{{ item.create_time }}</view>
									</view>
								</view>

								<view class="record-award flex-all-center relative">
									<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/ico-item.png`" mode=""></image>
									<image class="record-award-cover" :src="item.item_cover" mode="heightFix" />
									<view class="record-award-name absolute">
										<text class="relative record-award-name-txt truncate">{{ item.item_name }}</text>
										<text class="relative record-award-name-txt truncate">x{{ item.num }}</text>
									</view>
									<!-- <view class="record-award-num absolute">x{{ item.num }}</view> -->
								</view>
							</view>
						</template>
					</template>
					<comLoadMore class="loadmore-txt" :loading="isLoading" v-else-if="isLoading"></comLoadMore>
					<comEmptyData v-else />
				</view>
			</scroll-view>

			<view class="receive-allbtn-box margin-auto relative" v-if="currentActiveTab === 0" :class="isAllEnableReceive === 1 ? '' : 'disabled'" @click="setReceiveAllAwardFun">
				<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/all-receive.png`" mode=""></image>
			</view>

			<view class="receive-rule-box relative">
				<view class="receive-rule-title margin-auto relative flex-all-center">
					<image class="receive-rule-gap absolute" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/invite/receive-rule-gap.png`" mode=""> </image>
					<!-- <text class="relative font-hanserif-regular">活动规则</text> -->
				</view>
				<view class="receive-rule-txt" v-html="ruleTxt"></view>
			</view>

			<comMask v-model="isShowAppCodeUppop">
				<view class="app-uniqcode-uppop relative font-hanserif-bold">
					<image class="uppop-close-btn absolute" 
						v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
						:src="`${commonConfigs.domainFrontFileLink}/files/images/invite/dialog-bg-close.png`"
						mode="" 
						@click="isShowAppCodeUppop = false"> </image>
					
					<image class="bg" 
					v-if="commonConfigs && commonConfigs.domainFrontFileLink"
					:src="`${commonConfigs.domainFrontFileLink}/files/images/invite/confirm-bg.png`"
					mode=""> </image>

					<view class="uniqcode-uppop-box relative">
						<view class="flex justify-content-between uniqcode-info-title">我的邀请码：</view>

						<view class="uniqcode-info relative flex-all-center" @click="setCopyFun(posterData.qrcodeBgInfo.code)">
							<image class="bg"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/invite/top-code-bg.png`"
								mode=""> </image>
							<view class="relative" style="z-index: 10">{{ posterData.qrcodeBgInfo.code || '邀 请 码' }}</view>
						</view>

						<view class="uniqcode-copy-txt relative" @click="setCopyFun(posterData.qrcodeBgInfo.code)">{{ AppCodeCopyTip }}</view>
					</view>

					<view class="uniqcode-uppop-input relative">
						<view class="flex justify-content-between">绑定好友：</view>

						<view class="uppop-input-box relative">
							<image class="bg"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/invite/top-code-bg.png`"
								mode=""> </image>
							<input
								type="text"
								v-model="inviteAppCode"
								style="width: 100%; height: 100%; padding-left: 18rpx; color: #FFFFFF; border-radius: 10rpx"
								placeholder="请输入好友邀请码"
								placeholder-class="uppop-input-box_placeholder"
							/>
						</view>
					</view>

					<view class="relative uniqcode-uppop-btn flex-all-center" @click="setBindInviterFun">
						<image class="bg" 
							v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
							:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-sure-btn.png`"
							mode=""></image>
						<!-- <text class="relative font-hanserif-bold" style="color: #000"> 确定 </text> -->
					</view>
				</view>
			</comMask>
		</scroll-view>
		
		<!-- 小程序隐私保护指引设置 -->
		<!-- #ifdef MP-WEIXIN -->
		<comPrivacyPopup senceOrign="sceneNull" style="z-index: 100000;" title="用户隐私保护提示" popupOfHeight="480rpx"></comPrivacyPopup>
		<!-- #endif -->
		
	</view>
</template>

<script>
	import store from '@/store';

	import paging from '@/inmixed/paging.mixin.js';

	import { setAsyncFunWait } from '@/setupproject/TOOLS_FUN';
	import { getContentHomeApi, getInviteHomeApi, getInviteReceiveLogApi, getInviteQrcodeApi, getInviteReceiveApi, getInviteReceiveAllApi, getInviteCodeBindApi } from '@/setupproject/INTERFACE';

	export default {
		name: 'invitePage',
		mixins: [paging],
		data() {
			return {
				currentFlag: true,
				currentActiveTab: 0,
				tabAreaList: [
					{
						name: '下级用户'
					},
					{
						name: '领取记录'
					}
				],
				isLoading: true,
				resLists: [],
				awardData: [],
				isAllEnableReceive: 0,
				AppCodeCopyTip: '（ 点击复制，分享给好友 ）',
				isShowAppCodeUppop: true,
				isShowAppPoster: false,
				inviteAppCode: '',
				inviteTips: '',
				ruleTxt: '',
				scrollTop: 0,
				scrollY: true,
				oldScrollTop: 0,
				posterData: {
					posterBasicInfo: {
						//根据屏幕大小自动生成海报背景大小
						url: store.getters.commonConfigs + '/files/images/common/invite_bg.png', //图片地址
						r: 0, //圆角半径
						w: 334, //海报宽度
						h: 544, //海报高度
						p: 20 //海报内边距padding
					},
					posterBgInfo: {
						// 二维码盒子
						r: 0, //圆角半径
						w: 156, //宽度
						h: 156, //高度
						y: 320
					},
					qrcodeBgInfo: {
						//小程序码
						url: store.getters.commonConfigs + '/files/images/common/invite_qrcode.png', //图片地址
						w: 156, //宽度
						h: 156, //高度
						mt: 0, //margin-top
						r: 60, //圆角半径
						y: 390
					}
				},
			};
		},
		computed: {
			scrollHeightBox() {
				let scrollHeightBox = '1080rpx';
			
				if (this.currentActiveTab === 0) {
					if (this.resLists.length >= 5) {
						scrollHeightBox = '1080rpx';
					} else {
						scrollHeightBox = this.resLists.length * 500 + 'rpx';
					}
				}
			
				if (this.currentActiveTab === 1) {
					if (this.resLists.length >= 9) {
						scrollHeightBox = '1080rpx';
					} else {
						scrollHeightBox = this.resLists.length * 150 + 'rpx';
					}
				}
			
				if (this.resLists.length === 0) {
					scrollHeightBox = '500rpx';
				}
			
				return scrollHeightBox;
			},
			commonOnline() {
				return this.$store.getters.commonOnline;
			},
			
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			
		},
		onShow() {
			// #ifdef APP-PLUS
			this.isShowAppPoster = true;
			// #endif
			
			this.getInviteQrcodeFun();
            this.ruleContentGetFun();
			
			if(!this.resLists || !this.resLists.length) return;
			
			this.resLists.map((item, index) => {
				item.currentIndex = -1;
				item.personal_money = Number(item.personal_money);
				
				item.invite_config.map((subItem, subIndex) => {
					let processVal = 0;
					let processTotal = item.invite_config.length;
					
					if (item.personal_money >= subItem.money) {
						item.currentIndex = subIndex;
					}

					if (item.currentIndex == -1) {
						processVal = (item.personal_money / item.invite_config[0].money) * (1 / (processTotal * 2)) * 100;
					} else if (item.currentIndex == processTotal - 1) {
						processVal = 100;
					} else {
						processVal =
							(100 / processTotal) * item.currentIndex +
							100 / (processTotal * 2) +
							((item.personal_money - item.invite_config[item.currentIndex].money) /
								(item.invite_config[item.currentIndex + 1].money - item.invite_config[item.currentIndex].money)) *
								(100 / processTotal);
					}
					this.resLists[index].progressWidth = processVal;
				});
			});
			
		},
		methods: {
			posterCancelFun(status) {
				this.scrollY = true;
			},
			
			setScrollFun(e) {
				this.oldScrollTop = e.detail.scrollTop;
			},
			
			previewImage(tempFilePath) {
				// console.log('previewImage:', tempFilePath);
			},
			
			setCopyFun(data) {
				uni.setClipboardData({
					data,
					success: function () {
						uni.showToast({
							title: `已复制：${data}`,
							icon: 'none'
						});
					}
				});
			},
			
			async setTabFun(index) {
				this.currentFlag = false;
				this.currentActiveTab = index;
				await this.pagingInitFun();
				await this.resListsGetFun();
			},
			
			async setGeneratePosterFun() {
				// #ifdef MP-WEIXIN
				if(await store.dispatch('SHOW_OFFICE_PRIVACY_GET_FUN')) return;
				// #endif
				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// #endif

				this.scrollTop = this.oldScrollTop;
				this.$nextTick(() => {
					this.scrollTop = 0;
				});
				this.$refs.posterCanvas.setShowPosterFun();

				this.$nextTick(() => {
					this.scrollY = false;
				});
			},
			
			// 绑定邀请关系
			async setBindInviterFun() {
				if (!this.inviteAppCode) {
					return (this.isShowAppCodeUppop = false); // 是否显示弹框
				}

				const { msg, code } = await getInviteCodeBindApi({
					code: this.inviteAppCode
				});

				uni.showToast({
					title: msg,
					icon: 'none',
					mask: true,
					duration: 1600
				});

				if (code === 200) {
					await setAsyncFunWait(1600);
					await (this.isShowAppCodeUppop = false);
					await this.pagingInitFun();
					await this.resListsGetFun();
				}
			},

			async listsGetFun() {
				this.isLoading = true;
				
				// 下级列表
				if (this.currentActiveTab == 0) {
					const { data, code } = await getInviteHomeApi({
						page: this.pageInfoObj.page,
						page_size: this.pageInfoObj.page_size
					});
					
					this.isLoading = false;
					this.currentFlag = true;
					
					if (code !== 200) return false;
					
					this.awardData = data.show_list && data.show_list.slice(0, 5);
					this.isAllEnableReceive = data.all_enable_receive;
					this.maxprice = data.maxprice;
					this.inviteTips = data.pricetext;
					data.resLists = data.invite_list;
					
					if(!data.resLists || !data.resLists.length) return data;

					data.resLists.map((item, index) => {
						item.currentIndex = -1;
						item.personal_money = Number(item.personal_money);
						item.invite_config.map((subItem, subIndex) => {
							let processVal = 0;
							let processTotal = item.invite_config.length;
							
							if (item.personal_money >= subItem.money) {
								item.currentIndex = subIndex;
							}

							if (item.currentIndex == -1) {
								processVal = (item.personal_money / item.invite_config[0].money) * (1 / (processTotal * 2)) * 100;
							} else if (item.currentIndex == processTotal - 1) {
								processVal = 100;
							} else {
								processVal =
									(100 / processTotal) * item.currentIndex +
									100 / (processTotal * 2) +
									((item.personal_money - item.invite_config[item.currentIndex].money) /
										(item.invite_config[item.currentIndex + 1].money - item.invite_config[item.currentIndex].money)) *
										(100 / processTotal);
							}
							data.resLists[index].progressWidth = processVal;
						});
					});
					
					return data;
				} else {
					// 领取记录
					
					const { data, code } = await getInviteReceiveLogApi({
						page: this.pageInfoObj.page,
						page_size: this.pageInfoObj.page_size
					});
					this.isLoading = false;
					this.currentFlag = true;
					
					if (code !== 200) return false;
					
					data.resLists = data.receive_log;
					
					return data;
				}
			},
			
			// 显示弹框
			async setShowUppopFun(index) {
				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// #endif
				
				this.isShowAppCodeUppop = true;
			},
			
			async ruleContentGetFun () {
				let type = '';
				if ( this.commonOnline ) {
					type = 27;
				} else {
					type = 9;
				}
				const { data, content } = await getContentHomeApi({ type });
				this.ruleTxt = data.content;
			},
			
			async setReceiveAllAwardFun() {
				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// #endif
				
				const { data, msg, code } = await getInviteReceiveAllApi();
				if (code !== 200) return false;

				uni.showToast({
					title: msg,
					icon: 'success',
					mask: true,
					duration: 1500
				});

				if (!this.currentFlag) return;
				
				await this.pagingInitFun();
				await this.resListsGetFun();
			},
			
			async getInviteQrcodeFun() {
				this.posterData.posterBasicInfo.url = this.commonConfigs.domainFrontFileLink + '/files/images/common/invite_bg.png';
				
				const { data, code } = await getInviteQrcodeApi();
				
				if (code !== 200) return false;
				
				this.posterData.qrcodeBgInfo.url = data.qrcode;
				// #ifdef APP-PLUS
				this.posterData.qrcodeBgInfo.code = data.code;
				// #endif
			},
			
			async setReceiveAwardFun(id, index) {
				const { data, msg, code } = await getInviteReceiveApi({
					invite_uid: id
				});
				
				if (code !== 200) return false;
			
				uni.showToast({
					title: data.msg,
					icon: 'success',
					mask: true,
					duration: 1500
				});
			
				this.resLists[index].invite_config = data.receive_result;
				this.resLists[index].enable_receive = data.enable_receive;
				this.isAllEnableReceive = data.all_enable_receive;
			},
			
		}
	};
</script>

<style scoped lang="scss">
	.invite-page {
		height: 100vh;
		overflow: hidden;
		.info-detail {
			overflow-y: auto;
			
			.info-banner {
				width: 600rpx;
				height: 240rpx;
				left: 0;
				right: 0;
				margin: 0rpx auto 48rpx;
			}
			
			.info-name {
				width: 512rpx;
				height: 80rpx;
				white-space: nowrap;
				font-size: 32rpx;
				color: #fff;
				margin-top: -18rpx;
			}
			
			.info-qrcode {
				margin-top: 30rpx;
				width: 488rpx;
				height: 76rpx;
				font-size: 32rpx;
				color: #fff;
			}
			
			.info-award {
				width: 670rpx;
				height: 464rpx;
				overflow: hidden;
				font-size: 20rpx;
				color: #3A1900;
				margin-top: 28rpx;
				
				.award-title {
					left: 0;
					top: 0rpx;
					margin: auto;
					width: 262rpx;
					height: 48rpx;
				}
				
				.award-content {
					top: 40rpx;
					left: 60rpx;
					
					.award-item {
						width: 161rpx;
						height: 160rpx;
						
						&:nth-child(1) {
							left: -16rpx;
							top: 18rpx;
							animation: rideUpAni 1s infinite linear alternate;
						}
						&:nth-child(2) {
							left: 80rpx;
							top: 158rpx;
							animation: rideUpAni 0.86s infinite linear alternate;
						}
						&:nth-child(3) {
							left: 218rpx;
							top: 40rpx;
							animation: rideDownAni 0.76s infinite linear alternate;
						}
						&:nth-child(4) {
							left: 356rpx;
							top: 154rpx;
							animation: rideUpAni 1s infinite linear alternate;
						}
						&:nth-child(5) {
							left: 442rpx;
							top: 6rpx;
							animation: rideDownAni 0.76s infinite linear alternate;
						}
						
						.award-cover {
							left: 0;
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto;
							max-width: 94rpx;
							height: 140rpx;
						}
						
						.award-name {
							width: 120rpx;
							height: 44rpx;
							// padding: 0 20rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							left: 0;
							right: 0;
							bottom: 4rpx;
							margin: auto;
							.award-name-txt {
								width: 100%;
								text-align: center;
								// margin-top: 8rpx;
								line-height: 44rpx;
							}
						}
						
						@keyframes rideUpAni {
							from {
								transform: translateY(-6rpx);
							}
											
							to {
								transform: translateY(6rpx);
							}
						}
						@keyframes rideDownAni {
							from {
								transform: translateY(-12rpx);
							}
											
							to {
								transform: translateY(12rpx);
							}
						}
						
					}
				}
				
				.award-desc {
					font-size: 14rpx;
					color: #fff;
					left: 14rpx;
					bottom: 0rpx;
					min-width: 232rpx;
					height: 88rpx;
					line-height: 20rpx;
					padding: 0 8rpx;
				}
				
			}
			
			.award-process {
				width: 672rpx;
				height: 168rpx;
				margin: 68rpx auto 68rpx;
			}
			
			.tabbar-box {
				margin-bottom: 38rpx;
				
				.tabbar-item {
					font-size: 28rpx;
					color: #FFFFFF;
					width: 152rpx;
					height: 56rpx;
					&.active {
						color: #fff;
						font-weight: bold;
					}
				}
				.tabbar-item + .tabbar-item {
					margin-left: 30rpx;
				}
			}
			
			.detail-data {
				.lower-box {
					width: 686rpx;
					height: 452rpx;
					margin-bottom: 30rpx;
					padding: 40rpx 36rpx 0;
					.lower-box-top {
						color: #111F2C;
						height: 118rpx;
						border-bottom: 2rpx solid #FFFFFF;
						margin-top: 30rpx;
						.lower-avatar {
							width: 82rpx;
							height: 82rpx;
							overflow: hidden;
							border: 1rpx solid #0F95FE;
							border-radius: 100%;
							.lower-avatar-img {
								width: 100%;
								height: 100%;
							}
						}
						.lower-title {
							margin-left: 12rpx;
							flex: 1;
							
							.lower-title-nick {
								font-size: 28rpx;
								color: #FFFFFF;
							}
							.lower-title-date {
								font-size: 24rpx;
								color: #FFFFFF;
							}
						}
						
						.receive-box {
							margin-left: 24rpx;
							width: 168rpx;
							height: 52rpx;
							z-index: 10;
							&.disabled {
								filter: grayscale(90%);
								-webkit-filter: grayscale(90%);
								-moz-filter: grayscale(90%);
								-ms-filter: grayscale(90%);
								-o-filter: grayscale(90%);
							}
						}
					}
					.lower-award-box {
						overflow-x: auto;
						margin-top: 10rpx;
						padding-top: 12rpx;

						.bar-list {

							.process-upper {
								width: 100%;
								height: 15rpx;
								border-radius: 10rpx;
								background: #BB8AFF;
								top: 126rpx;
							
								.process-downer {
									left: 0;
									top: 0;
									height: 15rpx;
									background: #79F6FF;
									border-radius: 10rpx;
								}
							}
							
							.award-box {
								.award-info {
									margin: 0 14rpx;
									width: 100rpx;
									height: 100rpx;
									overflow: hidden;
									.award-num {
										font-size: 24rpx;
										top: 6rpx;
										right: 12rpx;
										font-weight: bold;
										color: #4470FF;
									}
									.award-name-box {
										width: 100rpx;
										height: 26rpx;
										line-height: 26rpx;
										left: 0;
										right: 0;
										bottom: 0;
										margin: auto;
										padding: 0 4rpx;
										background: rgba(68, 112, 255, 0.4);
										border-radius: 0 0 12rpx 12rpx;
										font-size: 16rpx;
										color: #000000;
										text-align: center;
										.award-name-box-txt {
											// display: block;
											text-align: center;
											width: 100%;
										}
									}
									
									.award-box-cover {
										max-width: 64rpx;
										height: 64rpx;
										margin-top: -20rpx;
									}
									
									.award-received-bg {
										width: 100rpx;
										height: 100rpx;
									}
									
								}

								.process-point {
									font-size: 20rpx;
									color: #9E2D00;
									margin-top: 10rpx;
									width: 40rpx;
									height: 40rpx;
								}

								.process-point-txt {
									margin-top: 6rpx;
									font-size: 20rpx;
									color: #FFFFFF;
									white-space: nowrap;
									text-align: center;
								}
							}
						}
					}
				}
				
				.record-box {
					width: 710rpx;
					height: 112rpx;
					padding: 0rpx 36rpx 0;
					margin-bottom: 20rpx;
					
					.record-info {
						.record-info-avatar {
							margin-right: 14rpx;
							width: 80rpx;
							height: 80rpx;
							border-radius: 100%;
						}
						
						.record-info-name {
							width: 360rpx;
							.record-info-txt {
								font-size: 32rpx;
								color: #FFFFFF;
								height: 36rpx;
								line-height: 36rpx;
							}
							.record-info-date {
								font-size: 24rpx;
								color: #FFFFFF;
								margin-top: 12rpx;
								height: 28rpx;
								line-height: 28rpx;
							}
						}
					}
					
					.record-award {
						overflow: hidden;
						width: 100rpx;
						height: 100rpx;
						
						.record-award-cover {
							max-width: 100rpx;
							height: 66rpx;
							margin-top: -12rpx;
						}
						
						.record-award-name {
							font-size: 16rpx;
							color: #fff;
							background: rgba(0, 0, 0, .5);
							border-radius: 0 0 12rpx 12rpx;
							left: 0;
							right: 0;
							bottom: 0;
							margin: auto;
							width: 100rpx;
							height: 26rpx;
							line-height: 26rpx;
							padding: 0 4rpx;
							text-align: center;
							.record-award-name-txt {
								
								// display: block;
								width: 100%;
							}
						}

						.record-award-num {
							font-size: 24rpx;
							top: 6rpx;
							right: 12rpx;
							color: #4470FF;
						}
					}
				}
			}
			
			.receive-allbtn-box {
				width: 248rpx;
				height: 76rpx;
				margin-top: -40rpx;

				&.disabled {
					filter: grayscale(90%);
					-webkit-filter: grayscale(90%);
					-moz-filter: grayscale(90%);
					-ms-filter: grayscale(90%);
					-o-filter: grayscale(90%);
				}
			}

			.receive-rule-box {
				font-size: 28rpx;
				color: #fff;
				margin-top: 40rpx;
				padding-bottom: 60rpx;

				.receive-rule-title {
					font-size: 36rpx;
					width: 481rpx;
					height: 36rpx;
					
					.receive-rule-gap {
						width: 256rpx;
						height: 64rpx;
						left: 0;
						right: 0;
						margin: auto;
					}
				}

				.receive-rule-txt {
					margin-top: 28rpx;
					padding: 0 78rpx;
					line-height: 38rpx;
					text-align: justify;
				}
			}
		}
	}

	.app-uniqcode-uppop {
		font-size: 26rpx;
		color: #FFF;
		width: 696rpx;
		height: 481rpx;
		padding: 60rpx 48rpx 0;
		
		.uppop-close-btn {
			width: 35rpx;
			height: 35rpx;
			right: 10rpx;
			top: -30rpx;
			z-index: 10;
		}
		
		.uniqcode-uppop-box {
			width: 100%;
			
			.uniqcode-info-title {
				margin-left: 40rpx;
			}

			.uniqcode-info {
				font-size: 36rpx;
				margin: 24rpx auto 12rpx;
				color: #FFFFFF;
				width: 523rpx;
				height: 96rpx;
			}
			
			.uniqcode-copy-txt {
				font-size: 22rpx;
				color: #FFFFFF;
				width: 92%;
				text-align: right;
			}
		}

		.uniqcode-uppop-input {
			margin: 20rpx auto 0;
			width: 523rpx;

			.uppop-input-box {
				margin-top: 20rpx;
				height: 74rpx;
				/deep/ .uppop-input-box_placeholder {
					color: #CEDAFF;
					font-size: 28rpx;
				}
			}
		}

		.uniqcode-uppop-btn {	
			font-size: 34rpx;
			color: #ffffff;
			margin: 100rpx auto 0;
			width: 168rpx;
			height: 68rpx;
		}
	}
</style>
